<script setup lang="ts">
import UserAvatarMenu from '@/components/hd/userAvatarMenu.vue'
import useMenuStore from '@/layouts/admin/useMenuStore'
import { MenuFoldOne, MenuUnfoldOne } from '@icon-park/vue-next'
const menuStore = useMenuStore()
const { user } = useUserStore()
const { updatePassword } = useUser()
const userForm = reactive({
  name: user?.name,
  mobile: user?.mobile,
  password: "",
  password_confirmation: ""
})
const dialogVisible = ref(false)
const editUser = () => {
  dialogVisible.value = true
}
const ruleFormRef = ref()
const onSubmit = async () => {
  await updatePassword(userForm)
}
const close = () => {
  userForm.password = ""
  userForm.password_confirmation = ""
}
</script>

<template>
  <div class="bg-white relative shadow-sm z-50 p-2 border-b-1 px-5 flex justify-between items-center">
    <div class="flex items-center">
      <div class="mr-2" @click.stop="menuStore.toggleMenu">
        <MenuUnfoldOne theme="filled" size="24" fill="#10ad57" class="cursor-pointer duration-300"
          v-if="menuStore.menuState" />
        <MenuFoldOne theme="filled" size="26" fill="#10ad57" class="cursor-pointer duration-300" v-else />
      </div>
      <HdBreadcrumb class="hidden md:block" />
    </div>
    <div class="flex justify-center gap-2 items-center relative cursor-pointer">
      <icon-people theme="outline" size="22" class="cursor-pointer text-gray-700 hover:text-gray-500" @click="editUser" />
      <HdFullScreen class="hidden 2xl:flex text-gray-600" />
      <div class="w-16 h-16 bg-red-500 text-white p-2 rounded font-bold flex justify-center items-center	">
        {{ user?.department_name?.substring(0, 2) }}
      </div>
      <UserAvatarMenu />
    </div>
    <el-dialog v-model="dialogVisible" title="修改用户" width="30%" @close="close">
      <el-form ref="ruleFormRef" :model="userForm" label-width="120px" style="max-width: 460px" status-icon>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="userForm.name" disabled />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="userForm.mobile" disabled />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="password_confirmation">
          <el-input v-model="userForm.password_confirmation" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
